<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
  定时器:
     1.  循环定时器
     2.  一次性定时器
-->
<h1></h1>
<p>
    <button id="stop">停止</button>
    <button id="start">开始</button>
</p>

<script>
    function createTime() {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        //字符串模板
        let time = `今天是${year}年${month}月${day} ${hour}:${minutes}:${seconds}`
        document.querySelector('h1').innerText = time
    }

    let timeId = setInterval(createTime, 1000)

    document.getElementById('stop').onclick = function () {
        clearInterval(timeId)
    }


    document.getElementById('start').onclick = function () {
        timeId = setInterval(createTime, 1000)
    }


</script>
</body>
</html>
